<script setup lang="ts">
import { ref, computed, watch, reactive, onMounted } from 'vue';
import { useBooleanStore } from '@/store';
import { largeInventoryQuery } from '@/api/les';
import { Notification } from '@arco-design/web-vue';

const booleanStore = useBooleanStore();
const emit = defineEmits(['updateArray']);
const pageSize = ref<number>(10);
const pageNumber = ref<number>(1);
const materialCode = ref('');
const locationCode = ref('');

async function handleSearch() {
  const flowQueryData = ref({
  materialCode: materialCode.value,
  locationCode: locationCode.value,
  rows: pageSize.value,
  page: pageNumber.value,
});
  const newData = await largeInventoryQuery(flowQueryData.value);
  if (newData) {
    emit('updateArray', newData);
    if (newData.list.length === 0) {
      Notification.success({
        title: '成功',
        content: '当前查询条件下无数据',
        closable: true,
      });
    }
  } else {
    Notification.error({
      title: '失败',
      content: newData.message ? newData.message : '查询失败',
      closable: true,
    });
  }
}
function reset() {
  materialCode.value = '';
  locationCode.value = '';
  handleSearch();
}
// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 35) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});
onMounted(() => {
  handleSearch();
});
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }" class="input-col">
    <a-col :span="6">
      <a-input
        v-model="materialCode"
        placeholder="物料编码"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="locationCode"
        placeholder="库位编码"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
  </a-row>
  <div style="margin-top: 16px">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
  </div>
</template>

<style scoped>
span {
  margin-bottom: 16px;
}
.btn-reset {
  margin-left: 10px;
}
</style>
